<template>
    <el-menu default-active="activeIndex" class="el-menu-vertical-demo"  background-color="#334157"
             style="height: calc(100vh - 70px);"
             text-color="#fff"
             active-text-color="#ffd04b"
             :collapse="collapsed"
            >
        <el-sub-menu :index="item.key" v-for="item in menuData" :key="item.key">
            <template #title>
                <el-icon >
                    <component :is="item.icon"></component>
                </el-icon>
                <span>{{item.title}}</span>
            </template>
            <el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.key">
                <el-icon >
                    <component :is="subItem.icon"></component>
                </el-icon>
                <router-link :to = "subItem.path">
                    {{subItem.title}}
                </router-link>
            </el-menu-item>
        </el-sub-menu>
    </el-menu>

  
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onMounted } from 'vue'
import * as menu from '../assets/menu.js'

const menuData = ref([])

onMounted(() => {
    // menuData.value=[
    //     {
    //         key: 'menu-1',
    //         title: '员工模块',
    //         // path: '/home/menu1',
    //         icon: 'User',
    //         children: [
    //             {
    //                 key: 'menu-1-1',
    //                 title: '员工管理',
    //                 path: '/emp',
    //                 icon: 'Avatar'
    //             },
    //             {
    //                 key: 'menu-1-2',
    //                 title: '其他页面',
    //                 path: '/other',
    //                 icon: 'Lock'
    //             }
    //         ]

    //     },
    //     {
    //         key: 'menu-2',
    //         title: '其他模块',
    //         // path: '/home/menu1',
    //         icon: 'Operation',
    //         children: [
    //         ]

    //     }
    // ]


    menu.find()
        .then( res => {
            console.log(res.data)
            menuData.value=res.data
        })
})
</script>